<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            width: 100%;height:100%;
            margin: 0;
        }
    </style>
    <script src="./dist/index.umd.js"></script>
    <script type="module">
        window.onload = () => {
            console.log("1111111111111111111111111")
            var sandbox = document.querySelector("#sandbox");
            var button1 = document.querySelector("#button1");
            var button2 = document.querySelector("#button2");
            var button3 = document.querySelector("#button3");
            var button4 = document.querySelector("#button4");
            console.log(sandbox)
            button1.addEventListener('click', () => {
                console.log(sandbox.sandbox);
            })
            button2.addEventListener('click', () => {
                console.log("1111111111111111111111111")
                var code = `
            console.info("Sandboxed code initialized successfully");
            var title = document.createElement('h3');
            title.innerHTML = "Content is generated from the sandbox";
            document.body.appendChild(title);
        `
                sandbox.runCode(code, (res) => {
                    console.log(res);
                })
            })
            // 调用沙箱
            button3.addEventListener('click', () => {
                var code = `
            console.info("Sandboxed code initialized successfully");
            var title = document.createElement('h3');
            title.innerHTML = "Content is generated from the sandbox";
            document.body.appendChild(title);
        `
                sandbox.callSandboxFunction('getIframeInstance', {}, async (res) => {
                    console.log(res);
                })
            })
            // 像沙箱注入环境
            button4.addEventListener('click', () => {
                var code = `
            console.info("Sandboxed code initialized successfully");
            var title = document.createElement('h3');
            title.innerHTML = "Content is generated from the sandbox";
            document.body.appendChild(title);
        `
                sandbox.injectSandboxLocalApi('getIframeInstance', () => {
                    const time = new Date();
                    return time.toString();
                }, (res) => {
                    console.log(res);
                })
            })
        }

    </script>
</head>
<body style="width: 100%;height: 100%;margin: 0;">
    <wu-code-sandbox id="sandbox" style="width: 100%;height: 100%"></wu-code-sandbox>
    <button id="button1">读取沙箱实例</button>
    <button id="button2">执行code</button>
    <button id="button3">调用沙箱实例</button>
    <button id="button4">Sandbox 注入数据</button>
</body>
</body>
</html>

